<template>
  <div class="el-form-item itemStyle both-form">
    <div class="mix">
      <label
        :for="item.selectOne.prop"
        class="el-form-item__label"
        style="width: 110px;"
        >{{ item.label }}</label
      >
      <div class="valueRange">
        <el-form-item
          :style="{
            width: item.selectOne.width,
            flex: item.selectOne.width ? 'none' : 1
          }"
          :rules="item.selectOne.rule"
          :prop="item.selectOne.prop"
          :clearable="item.clearable === undefined ? true : item.clearable"
        >
          <el-select
            @visible-change="fixEdgeSelect"
            v-model="formData[item.selectOne.prop]"
            @change="
              item.selectOne.change &&
                item.selectOne.change(formData[item.selectOne.prop])
            "
            :disabled="item.selectOne.disabled"
            :placeholder="
              item.selectOne.placeholder === undefined
                ? '请选择'
                : item.selectOne.placeholder
            "
            :clearable="
              item.selectOne.clearable === undefined
                ? true
                : item.selectOne.clearable
            "
            :filterable="item.selectOne.filterable"
            :loading="loading"
            class="input-with-select"
          >
            <el-option
              v-if="item.selectOne.showAll"
              label="全部"
              value="-1"
            ></el-option>
            <el-option
              v-for="child in item.selectOne.children"
              :label="child.label"
              :value="child.code"
              :key="child.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: item.selectTwo.width,
            flex: item.selectTwo.width ? 'none' : 1
          }"
          :rules="item.selectTwo.rule"
          :prop="item.selectTwo.prop"
          :clearable="item.clearable === undefined ? true : item.clearable"
        >
          <el-select
            @visible-change="fixEdgeSelect"
            v-model="formData[item.selectTwo.prop]"
            @change="
              item.selectTwo.change &&
                item.selectTwo.change(formData[item.selectTwo.prop])
            "
            :disabled="item.selectTwo.disabled"
            :placeholder="
              item.selectTwo.placeholder === undefined
                ? '请选择'
                : item.selectTwo.placeholder
            "
            :clearable="
              item.selectTwo.clearable === undefined
                ? true
                : item.selectTwo.clearable
            "
            :filterable="item.selectTwo.filterable"
            :loading="loading"
            class="input-with-select"
          >
            <el-option
              v-if="item.selectTwo.showAll"
              label="全部"
              value="-1"
            ></el-option>
            <el-option
              v-for="child in item.selectTwo.children"
              :label="child.label"
              :value="child.code"
              :key="child.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selectBothCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      fixEdgeSelect: Utils.Tools.fixEdgeSelect
    };
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.both-form {
}
.mix {
  display: flex;
  .valueRange {
    display: flex;
    width: calc(100% - 110px);
  }
  ::v-deep .el-form-item {
    margin-right: 0 !important;
  }
  ::v-deep .el-form-item {
    ::v-deep .el-form-item__content {
      width: 100%;
    }
  }
}
</style>
